<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="rid" label="#" width="150" />
    <el-table-column prop="rnm" label="角色名称" />
    <el-table-column prop="dsc" label="描述" />
    <el-table-column prop="nbl" label="状态" width="150" />
    <el-table-column label="状态" width="180">
      <template #default="scope">
        <el-switch
          v-model="scope.row.nbl"
          class="ml-2"
          style="--el-switch-on-color: #ff4949; --el-switch-off-color: #13ce66"
          active-value="1"
          inactive-value="0"
          active-text="禁用"
          inactive-text="正常"
          @change="nblchange(scope.row)"
        />
      </template>
    </el-table-column>

    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button size="small" type="danger" @click="handleAuth(scope.$index, scope.row)"
          >授权</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { Timer } from '@element-plus/icons-vue'
// import { ref } from 'vue'
import { useRolesStore } from '../../stores/roles'
import { storeToRefs } from 'pinia'
const rolesStore = useRolesStore()

const { tableData } = storeToRefs(rolesStore)

const nblchange = (roles) => {
  console.log(1)
  rolesStore.formData = roles
  rolesStore.modRoles()
}

const handleEdit = (index, row) => {
  console.log(index, row)
}
const handleAuth = (index, row) => {
  rolesStore.preInfo4Drawer(row)
}

rolesStore.loadAll()
</script>
